<template>
  <slot :name="`${item?.value}-column`" :column="item">
    <el-table-column
      :class-name="`${item?.popover === false ? 'no-popover' : ''}`"
      :label-class-name="`${item.required ? 'required' : ''}`"
      :show-overflow-tooltip="item?.popover === false ? false : true"
      :label="item?.label"
      :prop="item?.value"
      :column-key="item?.value"
      :sortable="item?.sort ? 'custom' : false"
      :width="item?.width ? item.width : 'auto'"
      :min-width="item?.minWidth ? item.minWidth : ''"
      :align="item?.align ? item.align : 'center'"
      :header-align="item?.headerAlign ? item.headerAlign : 'center'"
      :fixed="item?.fixed ? item.fixed : false"
      :filters="item?.filters ? item.filters : null"
      :filter-multiple="!!item?.filterMultiple"
    >
      <template #default="scope">
        <template v-if="item.html">
          <div v-html="scope?.row[item?.value]"></div>
        </template>
        <template v-else>
          <slot :name="`${item?.value}-column-value`" :scope="scope">
            <template v-if="dictMapCpt?.size > 0">
              <template v-if="item?.dictSplit">
                {{
                  scope?.row[item?.value]
                    .split(',')
                    .map((v) => dictMapCpt.get(String(v)) || v)
                }}.join(item.dictSplit)
              </template>
              <template v-else>
                {{
                  dictMapCpt.get(String(scope?.row[item?.value])) ||
                  scope?.row[item?.value]
                }}</template
              >
            </template>
            <template v-else>
              <template v-if="item.date">
                {{ YMD(scope?.row[item?.value]) }}
              </template>
              <template v-else-if="item.datetime">
                {{ YMDHms(scope?.row[item?.value]) }}
              </template>
              <template v-else>
                {{ scope?.row[item?.value] }}
              </template>
            </template>
          </slot>
        </template>
      </template>
      <template #header>
        <slot :name="`${item?.value}-header-value`" />
      </template>
    </el-table-column>
  </slot>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CzrTableColumn',
})
import { getCurrentInstance, reactive, computed } from 'vue'
import { YMD, YMDHms } from '@/utils/czr-util'

const { proxy } = getCurrentInstance()
const props = defineProps({
  item: {
    required: true,
  },
})
const dictMapCpt = computed(() => {
  const map = new Map()
  const labelKey = props.item?.dictLabel || 'label'
  const valueKey = props.item?.dictValue || 'value'
  if (props.item?.dictList) {
    props.item.dictList.forEach((v) => {
      map.set(String(v[valueKey]), v[labelKey])
    })
  } else if (props.item?.dictMap) {
    props.item.dictMap.forEach((v, k) => {
      map.set(String(v), k)
    })
  }
  return map
})
</script>

<style lang="scss" scoped></style>
